<template>
  <div id="app">
    <float-bar></float-bar>
    <!-- 尽量把每个条目都组件化 相同的话可以抽出公共部分 放入插槽更改 版式一样的话就取出里面的数据部分由外部导入-->
    <!-- 头部导航栏 适应和样式需要重置 -->
    <header-bar></header-bar>
    <!-- 快速导航栏 -->
    <nav-bar></nav-bar>
    <!-- 推荐栏 -->
    <recommend-bar></recommend-bar>
    <!-- 推广栏 -->
    <tuiguang-bar></tuiguang-bar>
    <!-- 直播栏 -->
    <zhibo-bar class="pos"></zhibo-bar>
    <!-- 动画栏 -->
    <common-row :resdata="animData" :data="sj" class="pos"></common-row>
    <!-- 番剧栏 -->
    <fanju-bar class="pos"></fanju-bar>
    <!-- 番剧动态 -->
    <anim-state class="pos"></anim-state>
    <!-- 国创区 -->
    <guo-chuang class="pos"></guo-chuang>
    <!-- 国创动态 稍后与动画组件合并 做出公共组件-->
    <common-row :resdata="guoChuangData" :data="sj"></common-row>
    <!-- 课堂 -->
    <!-- 漫画推荐 -->
    <comic-book class="pos"></comic-book>
    <common-row :resdata="musicData" :data="sj" class="pos"></common-row>
    <common-row :resdata="danceData" :data="sj" class="pos"></common-row>
    <common-row :resdata="gameData" :data="sj" class="pos"></common-row>
    <common-row :resdata="zhishiData" :data="sj" class="pos"></common-row>
    <ke-tang class="pos"></ke-tang>
    <common-row :resdata="shumaData" :data="sj" class="pos"></common-row>
    <common-row :resdata="shenghuoData" :data="sj" class="pos"></common-row>
    <common-row :resdata="guichuData" :data="sj" class="pos"></common-row>
    <common-row :resdata="shishangData" :data="sj" class="pos"></common-row>
    <zi-xun class="pos"></zi-xun>
    <common-row :resdata="yuleData" :data="sj" class="pos"></common-row>
    <common-row :resdata="dyData" :data="sj" class="pos"></common-row>
    <common-row :resdata="tvData" :data="sj" class="pos"></common-row>
    <common-row :resdata="jlpData" :data="sj" class="pos"></common-row>
    <footer-bar></footer-bar>
    <rank-pop></rank-pop>
  </div>
</template>

<script>
import Header from './components/index/Header.vue'
import Footer from './components/index/Footer.vue'
import Nav from './components/index/Nav.vue'
import Recommend from './components/index/Recommend.vue'
import TuiGuang from './components/index/TuiGuang'
import ZhiBo from './components/index/ZhiBo'
import Fanju from './components/index/Fanju'
import AnimState from './components/index/AnimState'
import Guochuang from './components/index/Guochuang'
import Comic from './components/index/Comic'
import CommonRow from './components/common/CommonRow'
import FloatBar from './components/index/FloatBar'
import Ketang from './components/index/Ketang'
import Zixun from './components/index/Zixun'
import rankPop from './components/popup/RankPop'
import './js/index'
import './css/index.css'

export default {
  name: 'app',
  data() {
    return {
      sj: [],
      animData: {
        name: '动画',
      },
      guoChuangData: {
        name: '国创原创相关',
      },
      musicData: {
        name: '音乐',
      },
      danceData: {
        name: '舞蹈',
      },
      gameData: {
        name: '游戏',
      },
      zhishiData: {
        name: '知识',
      },
      shumaData: {
        name: '数码',
        data: this.sj,
      },
      shenghuoData: {
        name: '生活',
        data: this.sj,
      },
      guichuData: {
        name: '鬼畜',
      },
      shishangData: {
        name: '时尚',
      },
      yuleData: {
        name: '娱乐',
      },
      dyData: {
        name: '电影',
      },
      tvData: {
        name: 'TV剧',
      },
      ysData: {
        name: '影视',
      },
      jlpData: {
        name: '纪录片',
      },
    }
  },
  components: {
    'header-bar': Header,
    'footer-bar': Footer,
    'nav-bar': Nav,
    'recommend-bar': Recommend,
    'tuiguang-bar': TuiGuang,
    'zhibo-bar': ZhiBo,
    'fanju-bar': Fanju,
    'anim-state': AnimState,
    'guo-chuang': Guochuang,
    'comic-book': Comic,
    'common-row': CommonRow,
    'float-bar': FloatBar,
    'ke-tang': Ketang,
    'zi-xun': Zixun,
    'rank-pop': rankPop,
  },
  async mounted() {
    this.sj = await this.getData('/index/donghua', 'fmPath', 'ImgList')
    console.log(this.animData.data)
  },
  methods: {
    async getData(address, pathName, pathName2) {
      const { data: res } = await this.$http.get(address)
      res.forEach((item) => {
        const path = 'http://127.0.0.1:3030'
        item[pathName] = path + item[pathName]
        for (let i = 0; i < item[pathName2].length; i++) {
          item[pathName2][i] = path + item[pathName2][i]
        }
      })
      return res
    },
  },
}
</script>
